<template>
  <div class="layout-padding">
    <div class="layout-padding-view gdzlzhpj-page">
      <div class="map-drawer">
        <el-tabs>
          <el-tab-pane label="质量评价"></el-tab-pane>
          <el-tab-pane label="对比分析"></el-tab-pane>
        </el-tabs>
        <el-form ref="formRef" :model="state.form" label-width="90px">
          <el-form-item label="数据选择" prop="name">
            <el-select v-model="state.form.name" placeholder="请选择">
              <el-option label="Options1" value="1" />
              <el-option label="Options2" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="历史数据" prop="history">
            <el-select v-model="state.form.history" placeholder="请选择">
              <el-option label="Options1" value="1" />
              <el-option label="Options2" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="评价模型" prop="mode">
            <el-select v-model="state.form.mode" placeholder="请选择">
              <el-option label="Options1" value="1" />
              <el-option label="Options2" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-space>
              <el-button type="primary">分析</el-button>
              <el-button>重置</el-button>
            </el-space>
          </el-form-item>
        </el-form>
        <div class="mt16">
          <el-table :data="tableData" border>
            <el-table-column prop="date" label="等级" width="100" />
            <el-table-column prop="name" label="面积" />
          </el-table>
        </div>
      </div>
      <div class="page-map">
        <MyMap>
          <ToolWrap>
            <BaseMap></BaseMap>
          </ToolWrap>
          <MapSupermapLayer
            url="http://123.127.160.203:8091/iserver/services/map-nercita_cloud/rest/maps/hlnc_gdzygldyt?prjCoordSys={epsgCode:4326}"
          ></MapSupermapLayer>
        </MyMap>
        <div class="echart-card">
          <el-card :title="title">
            <div ref="echartsRef" class="echarts"></div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="gdzlzhpj">
import { MyMap, BaseMap, ToolWrap, MapSupermapLayer } from '@/map';
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { ref, reactive } from 'vue';

const title = ref('评价分析');

const state = reactive<any>({
  form: {},
});

const tableData = ref([]);

const echartsRef = ref();
const initChart = () => {
  const XData = ['一级', '二级', '三级', '四级', '五级', '六级', '七级', '八级', '九级', '十级'];
  const chart = echarts.init(echartsRef.value);

  const option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: 0,
      right: 0,
      top: 40,
      bottom: 0,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: XData,
    },
    yAxis: {
      type: 'value',
      name: '面积',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: '2021',
        barMaxWidth: 10,
        data: [120, 200, 150, 80, 70, 110, 130, 200, 150, 90],
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#00FFE3', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#4693EC', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  chart.setOption(option);
};

onMounted(() => {
  initChart();
});
</script>

<style scoped lang="scss">
.gdzlzhpj-page {
  display: flex;
}
.map-drawer {
  width: 340px;
  box-shadow: var(--el-box-shadow-dark);
  padding: 8px 16px;
}

.page-map {
  flex: 1;
}
.echart-card {
  position: absolute;
  right: 40px;
  top: 100px;

  .echarts {
    width: 360px;
    height: 300px;
  }
}
</style>
